<html lang="ko">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>표 삽입</title>

<!-- script type="text/javascript" src="popup.js"></script-->
<script type="text/javascript">
//htmlArea v3.0 - Copyright (c) 2002, 2003 interactivetools.com, inc.
//This copyright notice MUST stay intact for use (see license.txt).
//
//Portions (c) dynarch.com, 2003
//
//A free WYSIWYG editor replacement for <textarea> fields.
//For full source code and docs, visit http://www.htmlarea.com/
//
//Version 3.0 developed by Mihai Bazon.
//http://dynarch.com/mishoo
//
//$Id: popup.js,v 1.12 2005/01/24 18:29:48 itools Exp $

function getAbsolutePos(el) {
	var r = { x: el.offsetLeft, y: el.offsetTop };
	if (el.offsetParent) {
		var tmp = getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
};

function comboSelectValue(c, val) {
	var ops = c.getElementsByTagName("option");
	for (var i = ops.length; --i >= 0;) {
		var op = ops[i];
		op.selected = (op.value == val);
	}
	c.value = val;
};

function __dlg_onclose() {
	opener.Dialog._return(null);
};

function __dlg_init(bottom) {
	var body = document.body;
	var body_height = 0;
	if (typeof bottom == "undefined") {
		var div = document.createElement("div");
		body.appendChild(div);
		var pos = getAbsolutePos(div);
		body_height = pos.y;
	} else {
		var pos = getAbsolutePos(bottom);
		body_height = pos.y + bottom.offsetHeight;
	}
	window.dialogArguments = opener.Dialog._arguments;
	if (!document.all) {
		//window.sizeToContent();
		//window.sizeToContent();	// for reasons beyond understanding,
					// only if we call it twice we get the
					// correct size.
		window.addEventListener("unload", __dlg_onclose, true);
		window.innerWidth = body.offsetWidth + 5;
		window.innerHeight = body_height + 2;
		// center on parent
		var x = opener.screenX + (opener.outerWidth - window.outerWidth) / 2;
		var y = opener.screenY + (opener.outerHeight - window.outerHeight) / 2;
		window.moveTo(x, y);
		if (navigator.userAgent.toLowerCase().indexOf("chrome") != -1) {	// chrome 경우는 alert()을 추가해 주어야만 사이징이 됨... 허허
			alert('삽입할 테이블에 대한 정보를 설정해 주십시오.');
			self.resizeTo(body.offsetWidth + 35, body_height + 60);
		} else {
			self.resizeTo(body.offsetWidth + 35, body_height + 60);
		}
	} else {	// IE
		// window.dialogHeight = body.offsetHeight + 50 + "px";
		// window.dialogWidth = body.offsetWidth + "px";
		window.resizeTo(body.offsetWidth + 10, body_height + 90);
		var ch = body.clientHeight;
		var cw = body.clientWidth;
		window.resizeBy(body.offsetWidth - cw, body_height - ch);
		var W = body.offsetWidth;
		var H = 2 * body_height - ch;
		var x = (screen.availWidth - W) / 2;
		var y = (screen.availHeight - H) / 2;
		window.moveTo(x, y);
	}
	document.body.onkeypress = __dlg_close_on_esc;
};

function __dlg_translate(i18n) {
	var types = ["input", "select", "legend", "span", "option", "td", "button", "div"];
	for (var type = 0; type < types.length; ++type) {
		var spans = document.getElementsByTagName(types[type]);
		for (var i = spans.length; --i >= 0;) {
			var span = spans[i];
			if (span.firstChild && span.firstChild.data) {
				var txt = i18n[span.firstChild.data];
				if (txt)
					span.firstChild.data = txt;
			}
                     if (span.title) {
				var txt = i18n[span.title];
				if (txt)
					span.title = txt;
                     }
		}
	}
	var txt = i18n[document.title];
	if (txt)
		document.title = txt;
};

//closes the dialog and passes the return info upper.
function __dlg_close(val) {
	opener.Dialog._return(val);
	window.close();
};

function __dlg_close_on_esc(ev) {
	ev || (ev = window.event);
	if (ev.keyCode == 27) {
		window.close();
		return false;
	}
	return true;
};

</script>

<script type="text/javascript">

window.resizeTo(400, 100);

function Init() {
  i18n = window.opener.HTMLArea.I18N.dialogs; // load the HTMLArea plugin and lang file
  __dlg_translate(i18n);
  __dlg_init();
  document.getElementById("f_rows").focus();
};

function onOK() {
  var required = {
    "f_rows": "You must enter a number of rows",
    "f_cols": "You must enter a number of columns"
  };
  for (var i in required) {
    var el = document.getElementById(i);
    if (!el.value) {
      alert(required[i]);
      el.focus();
      return false;
    }
  }
  var fields = ["f_rows", "f_cols", "f_width", "f_unit", "f_fixed",
                "f_align", "f_border", "f_spacing", "f_padding", "f_caption", "f_summary", "f_hided", "f_thead", "f_th"];
  var param = new Object();
  for (var i in fields) {
    var id = fields[i];
    var el = document.getElementById(id);
    param[id] = (el.type == "checkbox") ? el.checked : el.value;
  }
  __dlg_close(param);
  return false;
};

function onCancel() {
  __dlg_close(null);
  return false;
};

</script>

<style type="text/css">
html, body {
  background: ButtonFace;
  color: ButtonText;
  font: 11px Tahoma,Verdana,sans-serif;
  margin: 0px;
  padding: 0px;
}
body { padding: 5px; }
table {
  font: 11px Tahoma,Verdana,sans-serif;
}
form p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.fl { width: 9em; float: left; padding: 2px 5px; text-align: right; }
.fr { width: 7em; float: left; padding: 2px 5px; text-align: right; }
fieldset { padding: 0px 10px 5px 5px; }
select, input, button { font: 11px Tahoma,Verdana,sans-serif; }
button { width: 70px; }
.space { padding: 2px; }

.title { background: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px;
border-bottom: 1px solid black; letter-spacing: 2px;
}
form { padding: 0px; margin: 0px; }
</style>

</head>

<body onload="Init()">

<div class="title">표 삽입</div>

<form action="" method="get">
<table border="0" style="padding: 0px; margin: 0px">
  <tbody>

  <tr>
    <td style="width: 4em; text-align: right">행:</td>
    <td><input type="text" name="rows" id="f_rows" size="5" title="Number of rows" value="2"/></td>
    <td style="width: 2em; text-align: right"><input type="checkbox" name="thead" id="f_thead"/></td>
    <td><label for="f_thead">thead 지정</label></td>
    <td style="width: 3em; text-align: right">너비:</td>
    <td><input type="text" name="width" id="f_width" size="5" title="Width of the table" value="100"/></td>
    <td><select size="1" name="unit" id="f_unit" title="Width unit">
      <option value="%" selected="selected"  >Percent</option>
      <option value="px"              >Pixels</option>
      <option value="em"              >Em</option>
    </select></td>
  </tr>
  <tr>
    <td style="width: 4em; text-align: right">열:</td>
    <td><input type="text" name="cols" id="f_cols" size="5" title="Number of columns" value="4"/></td>
    <td style="width: 2em; text-align: right"><input type="checkbox" name="th" id="f_th"/></td>
    <td><label for="f_th">th 지정</label></td>
    <td style="text-align: right"><input type="checkbox" checked="checked" name="fixed" id="f_fixed"/></td>
    <td colspan="2"><label for="f_fixed">컬럼 너비 고정</label></td>
  </tr>
  <tr>
    <td style="width: 4em; text-align: right"><label for="f_caption">caption:</label></td>
    <td colspan="3"><input type="text" name="caption" id="f_caption" size="20" maxlength="20" title="table caption" value=""/></td>
    <td style="text-align: right"><input type="checkbox" checked="checked" name="hided" id="f_hided"/></td>
    <td colspan="2"><label for="f_hided">감추기</label></td>
  </tr>
  <tr>
    <td style="width: 4em; text-align: right"><label for="f_summary">summary:</label></td>
    <td colspan="6"><input type="text" name="summary" id="f_summary" size="55" maxlength="55" title="table summary" value=""/></td>
  </tr>
  </tbody>
</table>

<p/>

<fieldset style="float: left; margin-left: 5px;">
<legend>Layout</legend>

<div class="space"></div>

<div class="fl">Alignment:</div>
<select size="1" name="align" id="f_align"
  title="Positioning of this table">
  <option value="" selected="selected"                >Not set</option>
  <option value="left"                         >Left</option>
  <option value="right"                        >Right</option>
  <!-- option value="texttop"                      >Texttop</option>
  <option value="absmiddle"                    >Absmiddle</option>
  <option value="baseline"                     >Baseline</option>
  <option value="absbottom"                    >Absbottom</option>
  <option value="bottom"                       >Bottom</option>
  <option value="middle"                       >Middle</option>
  <option value="top"                          >Top</option-->
  <option value="center"                       >Center</option>
</select>

<p/>

<div class="fl">Border thickness:</div>
<input type="text" name="border" id="f_border" size="5" value="1"
title="Leave empty for no border"/>
<!--
<p/>

<div class="fl">Collapse borders:</div>
<input type="checkbox" name="collapse" id="f_collapse"/>
-->
<div class="space"></div>

</fieldset>

<fieldset style="float:right; margin-right: 5px;">
<legend>Spacing</legend>

<div class="space"></div>

<div class="fr">Cell spacing:</div>
<input type="text" name="spacing" id="f_spacing" size="5" value="1"
title="Space between adjacent cells"/>

<p/>

<div class="fr">Cell padding:</div>
<input type="text" name="padding" id="f_padding" size="5" value="1"
title="Space between content and border in cell"/>

<div class="space"></div>

</fieldset>

<div style="margin-top: 85px; border-top: 1px solid #999; padding: 2px; text-align: right;">
<button type="button" name="ok" onclick="return onOK();">OK</button>
<button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
</div>

</form>

</body>
</html>
